<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>徐州精诚特卫保安服务有限公司</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/personnelContract.css" rel="stylesheet">

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datetimepicker.js" ></script>
    <script src="js/bootstrap-datetimepicker.fr.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js" ></script>
    <script src="js/style.js"></script>
    <script src="js/personnelContract.js"></script>
    <script src="js/global.js"></script>
    <script src="js/timeInput.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">OA系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="personnelAnalysis.html">人事管理</a></li>
                <li><a href="marketingManager.html">营销管理</a></li>
                <li><a href="operationProjectManager.html">运营管理</a></li>
                <li><a href="financialManager.html">财务管理</a></li>
                <li><a href="warehouseCheck.html">采购管理</a></li>
                <li><a href="ManageDepartment.html">基本设置</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid main-body">
    <div id="left-nav" class="">
        <div class="left-nav-userInfo">
            <div class="userHead">
                <img class="userImg" src="imgs/user.png">
            </div>
            <div class="userTitle">
                <p></p><span class="glyphicon glyphicon-log-out" data-toggle="tooltip" data-placement="top" title="注销" onclick="logout()" aria-hidden="true"></span>
            </div>
        </div>
        <ul class="left-nav-menu">
            <li class="left-nav-menu-li">
                <a href="personnelAnalysis.html" class="menu-link">
                    <img src="imgs/addressbook.png">
                    <div>人事分析</div>
                </a>
            </li>
            <li class="left-nav-menu-li">
                <a class="menu-link">
                    <img src="imgs/brush.png">
                    <div>员工管理    <span class="glyphicon glyphicon-triangle-right"></span></div>
                </a>
                <ul class="sub-menu none">
                    <li class="sub-menu-li">
                        <a href="personnelList.html" class="sub-menu-link">
                            员工列表
                        </a>
                    </li>
                    <li class="sub-menu-li none">
                        <a href="personnelChange.html" class="sub-menu-link">
                            人事异动
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="personnelEmployeesLeave.html" class="sub-menu-link">
                            离职员工
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="personnelChangeCard.html" class="sub-menu-link">
                            员工换卡
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-nav-menu-li">
                <a class="menu-link">
                    <img src="imgs/createtask_fill.png">
                    <div>合同管理    <span class="glyphicon glyphicon-triangle-bottom"></span></div>
                </a>
                <ul class="sub-menu">
                    <li class="sub-menu-li sub-li-active">
                        <a href="personnelContract.html" class="sub-menu-link">
                            人员合同
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-nav-menu-li">
                <a class="menu-link">
                    <img src="imgs/kaoqin.png">
                    <div>考勤统计    <span class="glyphicon glyphicon-triangle-right"></span></div>
                </a>
                <ul class="sub-menu none">
                    <li class="sub-menu-li">
                        <a href="attendanceMonthSummary.html" class="sub-menu-link">
                            月度汇总
                        </a>
                    </li>
                    <li class="sub-menu-li ">
                        <a href="attendanceDailyStatistics.html" class="sub-menu-link">
                            每日统计
                        </a>
                    </li>
                    <li class="sub-menu-li none">
                        <a href="attendancePunchTime.html" class="sub-menu-link">
                            打卡时间
                        </a>
                    </li>
                    <li class="sub-menu-li ">
                        <a href="attendanceOriginalRecord.html" class="sub-menu-link">
                            原始记录
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-nav-menu-li">
                <a class="menu-link">
                    <img src="imgs/coupons.png">
                    <div>薪资管理    <span class="glyphicon glyphicon-triangle-right"></span></div>
                </a>
                <ul class="sub-menu none">
                    <li class="sub-menu-li">
                        <a href="salaryGenerateAndUpdate.html" class="sub-menu-link">
                            生成及修改
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="salaryQuery.html" class="sub-menu-link">
                            薪资查看
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="salaryBaseUpdateInBatch.html" class="sub-menu-link">
                            基本工资修改
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="salaryProject.html" class="sub-menu-link">
                            项目工资
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="" class="right-panel">
        <div class="nav-path">
            <div class="path-title">
                <ul class="path-ul">
                    <li>人员合同</li>
                </ul>
            </div>
        </div>
        <div class="main-body-content">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a onclick="getAllContractInformation()" href="#alreadySigned-panel" aria-controls="alreadySigned-panel" role="tab" data-toggle="tab">已签订</a></li>
                <li role="presentation"><a onclick="getAllDueDateContractInformation()" href="#dueDate-panel" aria-controls="dueDate-panel" role="tab" data-toggle="tab">即将到期</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="alreadySigned-panel">
                    <div class="top-body">
                        <div class="search-content" style="height: 34px;">
                            <div class="search-left">
                                <div class="dropdown select-department">
                                    <button class="btn btn-default dropdown-toggle" type="button" value="" id="alreadySigned-department" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        选择部门
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu alreadySigned-department-ul" aria-labelledby="alreadySigned-department">
                                        <li ><a value="">选择部门</a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                    </ul>
                                </div>
                                <div class="dropdown select-jobNature" style="margin-left: 3px">
                                    <button class="btn btn-default dropdown-toggle" type="button" value="" id="alreadySigned-jobNature" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        员工类型
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu alreadySigned-jobNature-ul" aria-labelledby="alreadySigned-jobNature">
                                        <li ><a value="">员工类型</a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                    </ul>
                                </div>
                                <div class="dropdown select-contractType" style="margin-left: 3px">
                                    <button class="btn btn-default dropdown-toggle" type="button" value="" id="alreadySigned-contractType" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        合同类型
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu alreadySigned-contractType-ul" aria-labelledby="alreadySigned-contractType">
                                        <li ><a value="">合同类型</a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                        <li class="hidden"><a></a></li>
                                    </ul>
                                </div>
                         <!--       <div style="display: inline-block;float: left;margin-left: 3px" class="input-group">
                                    <input id="alreadySigned-startDate" class="select-date" type="date">
                                </div>
                                <div style="display: inline-block;float: left;margin-right: 3px"class="input-group">
                                    <label for="alreadySigned-endDate" style="font-weight: normal">至</label>
                                    <input id="alreadySigned-endDate" class="select-date" type="date">
                                </div>-->
                                <div  style="display: inline-block;float: left;width:150px;margin-left: 3px">
                                    <div  class="input-group date to_date" >
                                        <input id="alreadySigned-startDate" size="12" class="form-control" value="年/月/日" type="text" readonly>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>
                                <div style="width:auto;height:34px;line-height:34px;float:left"><sapn>至</sapn></div>
                                <div style="display: inline-block;float: left;width:150px;margin-left: 3px;margin-right: 3px">
                                    <div  class="input-group date to_date" >
                                        <input id="alreadySigned-endDate" size="12" class="form-control" value="年/月/日" type="text" readonly>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <input type="text" id="alreadySigned-name" class="form-control" placeholder="按姓名搜索">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" onclick="getInformationByParameters()">搜索</button>
                                        <button class="btn btn-default" type="button" onclick="getAllContractInformation()">搜索全部</button>
                                    </span>
                                </div>
                            </div>
                            <div class="search-right">
                                <button class="btn btn-default" data-toggle="modal" data-target="#myModal-makeSureDeleteInBatch" onclick="setMakeSureDeleteInBatchButtonValue('')">批量删除</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-body">
                        <table class="table table-bordered">
                            <thead style="background-color: #F9FAFB">
                            <tr>
                                <th style="width: 34px"><input id="select-all" class="select-box" type="checkbox"></th>
                                <th>姓名</th>
                                <th>工号</th>
                                <th>部门</th>
                                <th>合同编号</th>
                                <th>合同类型</th>
                                <th>合同起始日</th>
                                <th>合同终止日</th>
                                <th>合同状态</th>
                                <th style="width: 50px">修改</th>
                                <th style="width: 50px">删除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-tr hidden">
                                <td class="alreadySignedStaff-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="alreadySignedStaff-name"></td>
                                <td class="alreadySignedStaff-id"></td>
                                <td class="alreadySignedStaff-department"></td>
                                <td class="alreadySignedStaff-contractNumber"></td>
                                <td class="alreadySignedStaff-contractType"></td>
                                <td class="alreadySignedStaff-contractStartDate"></td>
                                <td class="alreadySignedStaff-contractEndDate"></td>
                                <td class="alreadySignedStaff-contractCondition"></td>
                                <td class="alreadySignedStaff-operating">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="page-body">
                        <ul class="page-ul">
                            <li class="page-ul-li">
                                <div class="input-group" style="width: 110px">
                                    <input type="text" class="form-control skipPage" placeholder="">
                                    <span class="input-group-btn">
                                <button class="btn btn-default" onclick="skipPage('#alreadySigned-panel')" type="button">跳转</button>
                             </span>
                                </div>
                            </li>
                            <li class="page-ul-li"><a class="btn btn-default page-button" onclick="nextPage('#alreadySigned-panel')"><span class="caret caret-left"></span></a></li>
                            <li class="page-ul-li" style="margin-top: 8px"><span class="currentPage"></span>/<span class="totalPage"></span></li>
                            <li class="page-ul-li"><a class="btn btn-default page-button" onclick="previousPage('#alreadySigned-panel')"><span class="caret caret-right"></span></a></li>
                        </ul>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="dueDate-panel">
                    <div class="top-body">
                        <div class="search-content" style="height: 34px;">
                            <div class="search-left" style="width: 730px">
                            </div>
                            <div class="search-right">
                                <button class="btn btn-default" data-toggle="modal" data-target="#myModal-makeSureDeleteInBatch" onclick="setMakeSureDeleteInBatchButtonValue('dueDate')">批量删除</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-body">
                        <table class="table table-bordered">
                            <thead style="background-color: #F9FAFB">
                            <tr>
                                <th style="width: 34px"><input id="select-all" class="select-box" type="checkbox"></th>
                                <th>姓名</th>
                                <th>工号</th>
                                <th>部门</th>
                                <th>合同编号</th>
                                <th>合同类型</th>
                                <th>合同起始日</th>
                                <th>合同终止日</th>
                                <th>合同状态</th>
                                <th style="width: 50px">修改</th>
                                <th style="width: 50px">删除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            <tr class="table-trr hidden">
                                <td class="dueDate-checkBox tbody-td-id" style="width: 34px"><input class="select-box select-sub-box" type="checkbox"></td>
                                <td class="dueDate-name "></td>
                                <td class="dueDate-id"></td>
                                <td class="dueDate-department"></td>
                                <td class="dueDate-contractNumber"></td>
                                <td class="dueDate-contractType"></td>
                                <td class="dueDate-contractStartDate"></td>
                                <td class="dueDate-contractEndDate"></td>
                                <td class="dueDate-contractCondition"></td>
                                <td class="">
                                    <a class="" data-toggle="modal" data-target="#myModal-updateContract" onclick="setUpdateModalInformation(this)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </td>
                                <td>
                                    <a data-toggle="modal" data-target="#myModal-makeSureDelete" onclick="setMakeSureDeleteButtonValue(this)" value="dueDate"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="page-body">
                        <ul class="page-ul">
                            <li class="page-ul-li">
                                <div class="input-group" style="width: 110px">
                                    <input type="text" class="form-control skipPage" placeholder="">
                                    <span class="input-group-btn">
                                <button class="btn btn-default" onclick="skipPage('#dueDate-panel')" type="button">跳转</button>
                             </span>
                                </div>
                            </li>
                            <li class="page-ul-li"><a class="btn btn-default page-button" onclick="nextPage('#dueDate-panel')"><span class="caret caret-left"></span></a></li>
                            <li class="page-ul-li" style="margin-top: 8px"><span class="currentPage"></span>/<span class="totalPage"></span></li>
                            <li class="page-ul-li"><a class="btn btn-default page-button" onclick="previousPage('#dueDate-panel')"><span class="caret caret-right"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!---------------------------------------------------修改合同modal----------------------------------------------------------->
<!-------------------------------------------------------------------------------------------------------------->
<div class="modal fade" id="myModal-updateContract" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-signContract">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel-signContract">修改合同</h4>
            </div>
            <div class="modal-body" style="padding: 15px 20px">
                <form class="form-horizontal" id="updateContractModal-uploadImage" role="form" target="nm_iframe" enctype="multipart/form-data">
                    <div class="form-group ">
                        <label class="col-xs-3 control-label">员工姓名：</label>
                        <div class="col-xs-7">
                            <input id="modal-contractStaffName" type="text" class="form-control" placeholder="" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-xs-3 control-label">员工编号：</label>
                        <div class="col-xs-7">
                            <input id="modal-contractStaffID" type="text" class="form-control" placeholder="" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-xs-3 control-label">合同编号：</label>
                        <div class="col-xs-7">
                            <input id="modal-contractID" type="text" class="form-control" placeholder="" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-xs-3 control-label">合同类型：</label>
                        <div class="col-xs-7">
                            <input id="modal-contractType" type="text" class="form-control" placeholder="" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-contractStartDate" class="col-xs-3 control-label">合同开始日期：</label>
                        <div class="input-group date to_date col-xs-7" style="padding:0 15px">
                            <input type="text" class="form-control" value="年/月/日" id="modal-contractStartDate" >
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-contractEndDate" class="col-xs-3 control-label">合同结束日期：</label>
                        <div class="input-group date from_date col-xs-7" style="padding:0 15px">
                            <input type="text" class="form-control" value="年/月/日" id="modal-contractEndDate" >
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>

                    <div class="form-group ">
                        <label class="col-xs-3 control-label">合同周期：</label>
                        <div class="col-xs-7">
                            <input id="modal-contractPeriod" type="text" class="form-control" placeholder="" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label">合同状态：</label>
                        <div class="col-xs-7">
                            <div class="dropdown dropdown-div" >
                                <button class="btn btn-default dropdown-toggle"  type="button" value='' id="modal-contractStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    请选择
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-contractStatus" aria-labelledby="staffInformation-department">
                                    <li><a value="">请选择</a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                    <li class="hidden"><a></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="modal-contractContent" class="col-xs-3 control-label">合同内容</label>
                        <div class="col-xs-7">
                            <textarea class="form-control" id="modal-contractContent" style="height: 90px;overflow: auto"></textarea>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-xs-3 control-label">扫描件：</label>
                        <input class="scanningCopy" name="file" type="file" style="display:none" accept=".png,.jpg,.jpeg,.bmp" >
                        <div class="input-append col-xs-7">
                            <input id="modal-contractScanningCopy" class="input-large col-xs-9" value="" type="text" disabled="disabled" style="height: 34px; border-radius: 4px;" data-container="body" data-toggle="popover" data-placement="top"
                                   data-content="正在上传图片和数据，请稍后！！！">
                            <a class="btn col-xs-3" onclick="$('input[class=scanningCopy]').click();" >选择文件</a>
                        </div>
                        <div id="checkScanningCopyImg" class="col-xs-2 none" style="line-height: 34px;color: #337ab7;padding-left: 0px;">
                            <span class="glyphicon glyphicon-eye-open" onclick="setScanningCopyImageModal()" data-toggle="modal" data-target="#myModal-checkScanningCopyImg"  aria-hidden="true" style="cursor: pointer;"></span>
                        </div>
                    </div>
                </form>

                <iframe name="nm_iframe" style="display:none;"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateContractInformation()" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<!---------------------------------------------------查看扫描件modal----------------------------------------------------------->
<!-------------------------------------------------------------------------------------------------------------->
<div class="modal fade " id="myModal-checkScanningCopyImg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" value="">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header" style="padding: 5px 15px;border-bottom: none;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body" style="height:540px;">
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-sm" id="myModal-makeSureDelete" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" value="">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header" style="padding: 5px 15px">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                是否确认要删除？
                <button type="button" class="btn btn-default" data-dismiss="modal" style="float: right; margin-left: 5px">取消</button>
                <button type="button" class="btn btn-primary" style="float: right;" onclick="deleteContract()">确认</button>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-sm" id="myModal-makeSureDeleteInBatch" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" value="">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header" style="padding: 5px 15px">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                是否确认要批量删除？
                <button type="button" class="btn btn-default" data-dismiss="modal" style="float: right; margin-left: 5px">取消</button>
                <button type="button" class="btn btn-primary" style="float: right;" onclick="deleteContractInBatch()">确认</button>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
</body>
</html>